<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-container>
        <el-header>
          <div class="warn">
            <i class="el-icon-info"></i><span>添加商品信息</span>
          </div>
          <div class="steps">
            <el-steps
              :active="active - 0"
              finish-status="success"
              align-center
            >
              <el-step title="基本信息13333"></el-step>
              <el-step title="商品参数99"></el-step>
              <el-step title="商品属性111"></el-step>
              <el-step title="商品图片999"></el-step>
              <el-step title="商品内容88"></el-step>
              <el-step title="完成999"></el-step>
            </el-steps>
          </div>
        </el-header>
        <el-main class="sub">
          <el-form
            :model="ruleForm"
            class="demo-ruleForm"
            style="width: 70vw"
            ref="formdata"
          >
            <el-tabs
              :tab-position="tabPosition"
              v-model="active"
              :before-leave="leavetab"
              @tab-click="changeTab"
            >
              <el-tab-pane label="基本信息" name="0">
                <el-form-item
                  label="商品名称"
                  prop="goods_name"
                  :rules="{
                                        required: true,
                                        message: '输入不能为空',
                                        trigger: 'blur',
                                    }"
                >
                  <el-input
                    type="text"
                    v-model="ruleForm.goods_name"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="商品价格"
                  prop="goods_price"
                  :rules="{
                                        required: true,
                                        message: '输入不能为空',
                                        trigger: 'blur',
                                    }"
                >
                  <el-input
                    type="text"
                    v-model="ruleForm.goods_price"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="商品重量"
                  prop="goods_weight"
                  :rules="{
                                        required: true,
                                        message: '输入不能为空',
                                        trigger: 'blur',
                                    }"
                >
                  <el-input
                    v-model.number="ruleForm.goods_weight"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="商品数量"
                  prop="goods_number"
                  :rules="{
                                        required: true,
                                        message: '输入不能为空',
                                        trigger: 'blur',
                                    }"
                >
                  <el-input
                    type="text"
                    v-model="ruleForm.goods_number"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <!-- --- -->
                <el-form-item
                  label="商品分类"
                  prop="goods_cat"
                  :rules="{
                                        required: true,
                                        message: '输入不能为空',
                                        trigger: 'change',
                                    }"
                >
                  <el-cascader
                    clearable
                    expandTrigger="hover"
                    v-model="ruleForm.goods_cat"
                    :options="cateList"
                    :props="cateProps"
                    @change="handleChange"
                  ></el-cascader>
                </el-form-item>
              </el-tab-pane>
              <el-tab-pane label="商品参数" name="1">
                <el-form-item
                  v-for="item in manyTableData"
                  :key="item.attr_id"
                  :label="item.attr_name"
                >
                  <!-- 复选框 -->
                  <el-checkbox-group v-model="item.attr_vals">
                    <el-checkbox
                      :label="item"
                      v-for="(
                                                item, index
                                            ) in item.attr_vals"
                      :key="index"
                    ></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-tab-pane>
              <el-tab-pane label="商品属性" name="2">
                <el-form-item
                  :label="item.attr_name"
                  v-for="item in onlyTableData"
                  :key="item.attr_id"
                >
                  <el-input
                    v-model="item.attr_vals"
                  ></el-input
                  >
                </el-form-item>
              </el-tab-pane>
              <el-tab-pane label="商品图片" name="3">
                <!-- 上传图片 -->
                <!-- on-preview  点击图片名称会触发预览事件 -->
                <el-upload
                  class="upload-demo"
                  action="http://vue-shop-api-t.itheima.net/api/private/v1/upload"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  list-type="picture"
                  :headers="headerObj"
                  :on-success="handleSuccess"
                >
                  <el-button size="small" type="primary"
                  >点击上传
                  </el-button
                  >
                  <div slot="tip" class="el-upload__tip">
                    只能上传jpg/png文件，且不超过500kb
                  </div>
                </el-upload>
              </el-tab-pane>
              <!-- <el-tab-pane label="商品图片" name="4">5</el-tab-pane> -->
              <el-tab-pane label="商品内容" name="5">
                <quill-editor
                  v-model="ruleForm.goods_introduce"
                ></quill-editor>
              </el-tab-pane>
            </el-tabs>
          </el-form>
        </el-main>
      </el-container>
    </el-card>

    <!-- 图片预览对话框 -->
    <el-dialog title="图片预览" :visible.sync="dialogVisible" width="50%">
      <img :src="picurl" alt="" width="80%"/>
    </el-dialog>
  </div>
</template>
<script>
import {getCateListAPI, addqueryListAPI, attrListAPI} from "@/api/goods.js";
import {getToken} from "@/utils/storage.js";

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import {quillEditor} from "vue-quill-editor";

export default {
  components: {
    quillEditor,
  },
  name: "",
  data() {
    return {
      tabPosition: "left",
      active: 0,
      gname: "",
      ruleForm: {
        goods_name: "1",
        goods_price: "1",
        goods_weight: "1",
        goods_number: "1",
        //商品所属的数组
        goods_cat: [],
        //添加临时路径
        pics: ["1"],
        //富文本
        goods_introduce: "详情描述...",
      },

      //通过api获取到的数据
      cateList: [],
      //配置项
      cateProps: {
        label: "cat_name",
        value: "cat_id",
        children: "children",
      },

      //many
      manyTableData: {},

      //only
      onlyTableData: {},

      //上传请求头附带headers
      headerObj: {
        Authorization: getToken(),
      },

      //
      picurl: "",

      dialogVisible: false,
    };
  },
  created() {
    this.initData();
  },
  computed: {},
  mounted() {
  },
  methods: {
    //关闭对话框

    // 图片上传成功会触发这个钩子函数
    handleSuccess(response) {
      console.log(response, "8989");
      const picinfo = response.data.tmp_path;
      this.ruleForm.pics.push({pic: picinfo});
      this.ruleForm.pics.splice(0, 1);
      console.log(this.ruleForm, "98765");
    },
    //处理图片预览事件
    handlePreview(file) {
      console.log(file, "uuu");
      this.picurl = file.response.data.url;
      this.dialogVisible = true;
    },
    //处理删除图片的操作
    handleRemove(file) {
      console.log(file, "file");
      // 获取图片的临时路径
      //删除数组中对应的值
      const tp = file.response.data.tmp_path;
      console.log(tp, "tp");
      const i = this.ruleForm.pics.findIndex((x) => x.pic == tp);
      // console.log(i, 'iiii');
      this.ruleForm.pics.splice(i, 1);
    },
    //点击tab时触发
    async changeTab() {
      //当前 index
      console.log(this.active);
      if (this.active == 1) {
        const res = await addqueryListAPI(this.ruleForm.goods_cat[2]);
        console.log(res, "=-=-");

        res.data.forEach((item) => {
          item.attr_vals =
            item.attr_vals.length === 0
              ? []
              : item.attr_vals.split(" ");
        });

        this.manyTableData = res.data;
      } else if (this.active == 2) {
        const res = await attrListAPI(this.ruleForm.goods_cat[2]);
        console.log(res, "1234566");
        this.onlyTableData = res.data;
      }
    },
    //切换tab时触发
    leavetab(activeName, oldActiveName) {
      //activeName, oldActiveName  前往name的值 , 原来的name值
      if (
        Object.values(this.ruleForm).some((item) => item === false) &&
        oldActiveName === "0"
      ) {
        this.$message.error("请填写完整！");
        return false;
      }
    },
    //初始化
    async initData() {
      const res = await getCateListAPI();
      this.cateList = res.data;
    },

    //级联选择器发生变化时触发
    handleChange() {
      console.log(111);
      if (this.ruleForm.goods_cat.length !== 3) {
        this.ruleForm.goods_cat = [];
      }
    },
  },
};
</script>
<style lang='less' scoped>
.box-card {
  margin-top: 20px;
  // width: 100vw;
  .sub {
    display: flex;
  }

  .warn {
    text-align: center;
    color: #919398;
    background-color: #f4f4f5;
    height: 40px;
    line-height: 40px;
    border-radius: 5px;

    i {
      margin-right: 5px;
      font-size: 14px;
    }

    span {
      font-size: 14px;
    }
  }

  .steps {
    margin-top: 20px;
    padding: 8px;
  }

  .el-tabs {
    margin-top: 80px;
  }

  .el-checkbox-group {
  }
}

.ql-editor {
  height: 500px !important;
}
</style>
